<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://www.springframework.org/security/tags" prefix="security" %>
<!-- 查询按钮 -->
<c:set var="SEARCH_BUTTON" value="${CODE_AUTH.role_search_button}"></c:set>
<!-- 跳转添加页的按钮 -->
<c:set var="TO_ADD_BUTTON" value="${CODE_AUTH.role_to_add_button}"></c:set>
<!-- 添加保存的按钮 -->
<c:set var="ADD_SAVE_BUTTON" value="${CODE_AUTH.role_save_button}"></c:set>
<!-- 跳转修改页的按钮 -->
<c:set var="TO_EDIT_BUTTON" value="${CODE_AUTH.role_to_edit_button}"></c:set>
<!-- 修改保存的按钮 -->
<c:set var="EDIT_SAVE_BUTTON" value="${CODE_AUTH.role_edit_button}"></c:set>
<!-- 删除按钮 -->
<c:set var="DELETE_BUTTON" value="${CODE_AUTH.role_delete_button}"></c:set>
<!-- 跳转分配权限页面的按钮 -->
<c:set var="TO_ASSIGN_AUTH_BUTTON" value="${CODE_AUTH.role_to_assign_auth_button}" ></c:set>
<!-- 分配权限保存的按钮 -->
<c:set var="ASSIGN_AUTH_SAVE_BUTTON" value="${CODE_AUTH.role_assign_auth_button}" ></c:set>
<!-- 是否有跳转添加页的权限 -->
<security:authorize var="HAS_AUTH_TO_ADD" access="${TO_ADD_BUTTON.SPEL}"></security:authorize>	
<!-- 是否有添加保存的权限 -->						
<security:authorize var="HAS_AUTH_ADD_SAVE" access="${ADD_SAVE_BUTTON.SPEL}"></security:authorize>	
<!-- 是否有跳转修改页的权限 -->				
<security:authorize var="HAS_AUTH_TO_EDIT" access="${TO_EDIT_BUTTON.SPEL}"></security:authorize>
<!-- 是否有修改保存的权限 -->						
<security:authorize var="HAS_AUTH_EDIT_SAVE" access="${EDIT_SAVE_BUTTON.SPEL}"></security:authorize>	
<!-- 是否有删除的权限 -->						
<security:authorize var="HAS_AUTH_DELETE" access="${DELETE_BUTTON.SPEL}"></security:authorize>	
<!-- 是否有跳转分配权限页面的权限 -->				
<security:authorize var="HAS_AUTH_TO_ASSIGN_AUTH" access="${TO_ASSIGN_AUTH_BUTTON.SPEL}"></security:authorize>					
<!-- 是否有分配权限保存的权限 -->				
<security:authorize var="HAS_AUTH_ASSIGN_AUTH_SAVE" access="${ASSIGN_AUTH_SAVE_BUTTON.SPEL}"></security:authorize>					
<!-- 是否有查询的权限 -->				
<security:authorize var="HAS_AUTH_SEARCH" access="${SEARCH_BUTTON.SPEL}"></security:authorize>					
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 引入头部 -->
<%@include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="css/pagination.css">
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<link rel="stylesheet" href="ztree/zTreeStyle.css">
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="crowdfunding/my-role.js"></script>
<script type="text/javascript">
$(function(){
	
	// 1.为分页操作准备初始化数据
	window.pageNum = 1;
	window.pageSize = 5;
	window.keyword = "";
	window.roleId;
	window.roleIdArray;
	window.hasAuthSearch = "${HAS_AUTH_SEARCH}";
	window.hasAuthToEdit = "${HAS_AUTH_TO_EDIT}";
	window.hasAuthDelete = "${HAS_AUTH_DELETE}";
	window.hasAuthToAssignAuth = "${HAS_AUTH_TO_ASSIGN_AUTH}";
	window.hasAuthAddSave = "${HAS_AUTH_ADD_SAVE}";
	window.hasAuthEditSave = "${HAS_AUTH_EDIT_SAVE}";
	window.hasAuthAssignAuthSave = "${HAS_AUTH_ASSIGN_AUTH_SAVE}";
	if(window.hasAuthSearch == "true"){
		window.searchUrl = "${SEARCH_BUTTON.URL}";
	}
	if(window.hasAuthToEdit == "true"){
		window.toEditButton = {button_class: "${TO_EDIT_BUTTON.BUTTON_CLASS}", icon_class: "${TO_EDIT_BUTTON.ICON_CLASS}"};
	}
	if(window.hasAuthDelete == "true"){
		window.deleteButton = {url: "${DELETE_BUTTON.URL}", button_class: "${DELETE_BUTTON.BUTTON_CLASS}", icon_class: "${DELETE_BUTTON.ICON_CLASS}"};
	}
	if(window.hasAuthToAssignAuth == "true"){
		window.toAssignAuthButton = {url: "${TO_ASSIGN_AUTH_BUTTON.URL}", button_class: "${TO_ASSIGN_AUTH_BUTTON.BUTTON_CLASS}", icon_class: "${TO_ASSIGN_AUTH_BUTTON.ICON_CLASS}"};
	}
	if(window.hasAuthAddSave == "true"){
		window.addSaveButton = {url: "${ADD_SAVE_BUTTON.URL}", button_class: "${ADD_SAVE_BUTTON.BUTTON_CLASS}", icon_class: "${ADD_SAVE_BUTTON.ICON_CLASS}"};
	}
	if(window.hasAuthEditSave == "true"){
		window.editSaveButton = {url: "${EDIT_SAVE_BUTTON.URL}", button_class: "${EDIT_SAVE_BUTTON.BUTTON_CLASS}", icon_class: "${EDIT_SAVE_BUTTON.ICON_CLASS}"};
	}
	if(window.hasAuthAssignAuthSave == "true"){
		window.assignAuthSaveButton = {url: "${ASSIGN_AUTH_SAVE_BUTTON.URL}", button_class: "${ASSIGN_AUTH_SAVE_BUTTON.BUTTON_CLASS}", icon_class: "${ASSIGN_AUTH_SAVE_BUTTON.ICON_CLASS}"};
	}
	
	// 2.构建分页并实现页面效果
	generatePage();
	
	// 3.给查询按钮绑定单击响应函数
	$("#searchBtn").click(function(){
		
		// ①给全局变量分页页码赋值为第一页
		window.pageNum = 1;
		
		// ②获取关键字数据赋值给对应的全局变量
		window.keyword = $("#keywordInput").val();
		
		// ③调用分页函数刷新页面
		generatePage();
		
	});
	
	// 4.点击新增按钮打开模态框
	$("#showAddModalBtn").click(function(){
		
		// 打开新增模态框
		$("#addModal").modal('show');
		
	});
	
	// 5.给新增模态框中的保存按钮绑定单击响应函数
	$("#saveBtn").click(function(){
		
		// ①获取用户在文本框中输入的角色名称
		var roleName = $.trim($("#addModal input[name=roleName]").val());
		
		// 获取 CSRF Token
		var csrfToken =$("meta[name='_csrf']").attr("content");
		var csrfHeader =$("meta[name='_csrf_header']").attr("content");
		
		// ②发送Ajax请求
		$.ajax({
			url: window.addSaveButton.url,
			type: "POST",
			data: {
				name: roleName
			},
			dataType: "json",
			beforeSend: function(request){
				// 添加 CSRF Token
				request.setRequestHeader(csrfHeader, csrfToken); 
			},
			success: function(response){
				
				// 从response中获取result属性
				var result = response.result;
				
				// 判断成功
				if(result == "SUCCESS"){
					
					// 提示信息
					layer.msg("操作成功！");
					
					// 将页码定位到最后一页
					window.pageNum = 999999;
					
					// 重新加载分页数据
					generatePage();
				}
				
				// 如果失败
				if(result == "FAILED"){
					// 提示信息
					layer.msg("操作失败！" + response.message);
				}
			},
			error: function(response){
				layer.msg("服务器端程序调用失败！响应状态码="+response.status+" 说明信息="+response.statusText);
			}
		});
		
		// 关闭新增模态框
		$("#addModal").modal('hide');
		
		//清理模态框
		$("#addModal form")[0].reset();
		
	});
	
	//6.点击编辑按钮打开模态框
	$(document).on("click", ".pencilBtn", function(){
		
		// 打开编辑模态框
		$("#editModal").modal('show');
		
		// 获取角色id
		window.roleId = $(this).attr("data-id");
		
		// 获取角色名称
		var roleName = $(this).parents("tr").find("td:eq(2)").text();
		
		// 给输入框赋值
		$("#editModal input[name=roleName]").val(roleName);
		
	});
	
	// 7.给编辑模态框中的修改按钮绑定单击响应函数
	$("#editBtn").click(function(){
		
		// ①获取用户在文本框中输入的角色名称
		var roleName = $.trim($("#editModal input[name=roleName]").val());
		
		// 获取 CSRF Token
		var csrfToken =$("meta[name='_csrf']").attr("content");
		var csrfHeader =$("meta[name='_csrf_header']").attr("content");
		
		// ②发送Ajax请求
		$.ajax({
			url: window.editSaveButton.url,
			type: "POST",
			data: {
				id: window.roleId,
				name: roleName
			},
			dataType: "json",
			beforeSend: function(request){
				// 添加 CSRF Token
				request.setRequestHeader(csrfHeader, csrfToken); 
			},
			success: function(response){
				
				// 从response中获取result属性
				var result = response.result;
				
				// 判断成功
				if(result == "SUCCESS"){
					
					// 提示信息
					layer.msg("操作成功！");
					
					// 重新加载分页数据
					generatePage();
				}
				
				// 如果失败
				if(result == "FAILED"){
					// 提示信息
					layer.msg("操作失败！" + response.message);
				}
			},
			error: function(response){
				layer.msg("服务器端程序调用失败！响应状态码="+response.status+" 说明信息="+response.statusText);
			}
		});
		
		// 关闭新增模态框
		$("#editModal").modal('hide');
		
		//清理模态框
		$("#editModal form")[0].reset();
		
	});
	
	// 8.点击单条删除按钮
	$(document).on("click", ".removeBtn", function(){
		
		// 获取角色id
		var roleId = $(this).attr("data-id");
		
		// 获取角色名称
		var roleName = $(this).parents("tr").find("td:eq(2)").text();
		
		// 确认提示框
		layer.confirm("确认删除角色【"+roleName+"】吗？", {btn: ['确定', '取消']}, function(){
			// 角色id数组
			window.roleIdArray = [roleId];
			
			// 发送Ajax请求删除角色
			removeRole();
		});
	});
	
	// 9.点击批量删除按钮
	$("#batchRemoveBtn").click(function(){
		
		// 获取选中个数
		var checkLength = $(".check_item:checked").length;
		
		// 判断是否有选中的数据
		if(checkLength == 0){
			
			// 提示信息
			layer.msg("没有选中要删除的数据");
			return;
		}
		
		// 选中的角色名称
		var roleName = "";
		
		// 选中的角色id
		window.roleIdArray = [];
		
		// 获取选中的数据
		$.each($(".check_item:checked"), function(index, item){
			
			// 拼接选中的角色名称
			roleName += "【"+$(this).parents("tr").find("td:eq(2)").text()+"】";
			
			// 给选中的角色id数组追加新的值
			window.roleIdArray.push($(this).parents("tr").find(".removeBtn").attr("data-id") );
		});
		
		// 确认提示框
		layer.confirm("确认删除角色"+roleName+"吗？", {btn: ['确定', '取消']}, function(){
			
			// 发送Ajax请求删除角色
			removeRole();
			
			// 取消全选的选中状态
			$("#check_all").prop("checked", false);
			
		});
		
	});
	
	//完成全选、全不选
	$("#check_all").click(function(){
		//attr获取check属性是undefined
		//我们这些dom原生的属性用prop取。attr获取自定义属性的值
		$(this).prop("checked");
		$(".check_item").prop("checked", $(this).prop("checked"));
	});
	
	//check_item
	$(document).on("click", ".check_item", function(event){
		//判断当前选中的元素是否5个
		var flag = $(".check_item:checked").length == $(".check_item").length;
		$("#check_all").prop("checked", flag);
	});
	
	// 点击分配权限按钮打开模态框
	$(document).on("click", ".checkBtn", function(){
		
		// 打开模态框
		$("#assignAuthModal").modal('show');
		
		// 获取角色id
		window.roleId = $(this).attr("data-id");
		
		// 调用专门封装好的函数初始化分配权限树形结构
		generateAssignAuthTree();
		
	});
	
	// 给分配权限模态框中的保存按钮绑定单击响应函数
	$("#saveAuthBtn").click(function(){
		
		// 获取zTreeObj对象
		var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
		
		// 获取选中的节点数组
		var checkedNodes = zTreeObj.getCheckedNodes();
		
		// 创建一个FormData用来提交数据
		var formData = new FormData();
		
		// 将roleId放入formData中
		formData.append("roleId", window.roleId);
		
		// 遍历选中的节点数组
		for (var i = 0; i < checkedNodes.length; i++) {
			
			// 将authIdList放入formData中
			formData.append("authIdList", checkedNodes[i].id);
		}
		
		// 获取 CSRF Token
		var csrfToken =$("meta[name='_csrf']").attr("content");
		var csrfHeader =$("meta[name='_csrf_header']").attr("content");
		
		// 发送Ajax请求
		$.ajax({
			url: window.assignAuthSaveButton.url,
			type: "POST",
			data: formData,
			dataType: "json",
			processData: false, // 不处理数据（使用FormData提交表单时用）
			contentType: false, // 不设置内容类型（使用FormData提交表单时用）
			beforeSend: function(request){
				// 添加 CSRF Token
				request.setRequestHeader(csrfHeader, csrfToken); 
			},
			success: function(response){
				
				// 从response中获取result属性
				var result = response.result;
				
				// 判断成功
				if(result == "SUCCESS"){
					
					// 提示信息
					layer.msg("操作成功！");
					
					// 重新加载分页数据
					generatePage();
				}
				
				// 如果失败
				if(result == "FAILED"){
					// 提示信息
					layer.msg("操作失败！" + response.message);
				}
			},
			error: function(response){
				layer.msg("服务器端程序调用失败！响应状态码="+response.status+" 说明信息="+response.statusText);
			}
		});
		
		// 关闭模态框
		$("#assignAuthModal").modal('hide');
		
		//清理模态框
		$("#assignAuthModal #treeDemo").empty();
		
	});
	
});

// 发送Ajax请求删除角色
function removeRole(){
	// 获取 CSRF Token
	var csrfToken =$("meta[name='_csrf']").attr("content");
	var csrfHeader =$("meta[name='_csrf_header']").attr("content");
	// 发送Ajax请求
	$.ajax({
		url: window.deleteButton.url,
		type: "POST",
		data: JSON.stringify(window.roleIdArray),
		contentType: "application/json;charset=UTF-8",
		dataType: "json",
		beforeSend: function(request){
			// 添加 CSRF Token
			request.setRequestHeader(csrfHeader, csrfToken); 
		},
		success: function(response){
			
			// 从response中获取result属性
			var result = response.result;
			
			// 判断成功
			if(result == "SUCCESS"){
				
				// 提示信息
				layer.msg("操作成功！");
				
				// 重新加载分页数据
				generatePage();
			}
			
			// 如果失败
			if(result == "FAILED"){
				// 提示信息
				layer.msg("操作失败！" + response.message);
			}
		},
		error: function(response){
			layer.msg("服务器端程序调用失败！响应状态码="+response.status+" 说明信息="+response.statusText);
		}
	});
}
</script>
<body>
	<!-- 引入导航条 -->
	<%@include file="/WEB-INF/include-nav.jsp"%>
	<div class="container-fluid">
		<div class="row">
			<!-- 引入侧边栏 -->
			<%@include file="/WEB-INF/include-sidebar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							<i class="glyphicon glyphicon-th"></i> 数据列表
						</h3>
					</div>
					<div class="panel-body">
						<security:authorize access="${HAS_AUTH_SEARCH}">
							<form class="form-inline" role="form" style="float: left;">
								<div class="form-group has-feedback">
									<div class="input-group">
										<div class="input-group-addon">查询条件</div>
										<input id="keywordInput" class="form-control has-success" type="text"
											placeholder="请输入查询条件">
									</div>
								</div>
								<button id="searchBtn" type="button" 
									class="${SEARCH_BUTTON.BUTTON_CLASS}">
									<i class="${SEARCH_BUTTON.ICON_CLASS}"></i> 查询
								</button>
							</form>
						</security:authorize>
						<security:authorize access="${HAS_AUTH_DELETE}">
							<button id="batchRemoveBtn" type="button" 
								class="${DELETE_BUTTON.BUTTON_CLASS}"
								style="float: right; margin-left: 10px;">
								<i class="${DELETE_BUTTON.ICON_CLASS}"></i> 删除
							</button>
						</security:authorize>
						<security:authorize access="${HAS_AUTH_TO_ADD}">
							<button id="showAddModalBtn" type="button" 
								class="${TO_ADD_BUTTON.BUTTON_CLASS }"
								style="float: right;">
								<i class="${TO_ADD_BUTTON.ICON_CLASS }"></i> 新增
							</button>
						</security:authorize>
						<br>
						<hr style="clear: both;">
						<security:authorize access="${HAS_AUTH_SEARCH}">
							<div class="table-responsive">
								<table class="table  table-bordered">
									<thead>
										<tr>
											<th width="30">#</th>
											<th width="30"><input id="check_all" type="checkbox"></th>
											<th>名称</th>
											<th width="100">操作</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
									<tfoot>
										<tr>
											<td colspan="4" align="center">
											
												<div id="PageInfo" class="pull-left" style="margin: 20px 0;padding: 6px 0;position: absolute;left: 65px;"></div>
												
												<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
												
											</td>
										</tr>
	
									</tfoot>
								</table>
							</div>
						</security:authorize>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 引入模态框 -->
	<security:authorize access="${HAS_AUTH_TO_ADD }">
		<%@include file="/WEB-INF/modal-role-add.jsp"%>
	</security:authorize>
	<security:authorize access="${HAS_AUTH_TO_EDIT }">
		<%@include file="/WEB-INF/modal-role-edit.jsp"%>
	</security:authorize>
	<security:authorize access="${HAS_AUTH_TO_ASSIGN_AUTH }">
		<%@include file="/WEB-INF/modal-role-assign-auth.jsp"%>
	</security:authorize>
	
</body>
</html>